<template>
	<s-layout  navbar="custom1" :bgStyle="{
	 color: '#F8F8F8'
	}" onShareAppMessage>
		<assNavbar :title="state.type==0?'商户入驻':'代理商户入驻'" :background="{img: 'none',BGcolor: '#fff'}"></assNavbar>
		
		
		
		
		<view class="form-box ss-p-24 " >
			<view v-if="state.disabled" style="color:#515151">
				<view class="ss-flex justify-between font-1">
					<view style="color:#003288;font-weight:bold">待审核</view>
					<view>2025-10-13 12:00:34</view>
				</view>
				<view class="ss-m-y-20">驳回原因xxx</view>
			</view>
			<view>
				<uni-forms ref="form" :modelValue="state.form" :rules="rules" label-width="90">
					<view v-if="state.type==1" style="padding:40rpx 30rpx;background-color: #fff;border-radius: 20rpx;">
						<!-- 代办人信息从已入驻的资料中获取，禁止修改 -->
						<view class="form-box-head-title">代办人信息</view>
						<uni-forms-item label="代办人类型" name="host_name" required>
							<view class="form-box-input-item">
								<input :disabled="true" type="text" v-model="state.form.name" placeholder="商务BD" @input="setValue('host_name',state.form.name)"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="代办人姓名" name="host_name" required>
							<view class="form-box-input-item">
								<input :disabled="true" type="text" v-model="state.form.name" placeholder="请输入姓名" @input="setValue('host_name',state.form.name)"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="代办人手机号码" name="mobile" required>
							<view class="form-box-input-item">
								<input :disabled="true" type="number" :maxlength="11" v-model="state.form.mobile" placeholder="请输入手机号码" @input="setValue('mobile',state.form.mobile)"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="商户类型" name="mobile" required>
							<view class="form-box-input-item">
								<radio-group  @change="radioChange" class="ss-flex flex-wrap font-1"  style="width:370rpx;color:#424242">
									<label class="uni-list-cell uni-list-cell-pd ss-flex ss-m-l-10" v-for="(item, index) in radioList" :key="item.value">
											<radio color="#003288" :disabled="state.disabled" style="transform: scale(0.5)" :value="item.value" :checked="state.form.shopType == item.value" />
										<view class="font-1" style="color:gray">{{item.label}}</view>
									</label>
								</radio-group>
							</view>
						</uni-forms-item>
						
						
						
						
					</view>
					
					
					<view class="ss-m-t-20 bg-white"  style="padding:40rpx 30rpx;border-radius: 20rpx;">
						<view class="form-box-head-title">商户信息</view>
						<uni-forms-item label="商户姓名" name="host_name" required>
							<view class="form-box-input-item">
								<input :disabled="state.disabled"  type="text" v-model="state.form.name" placeholder="请输入姓名" @input="setValue('host_name',state.form.name)"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="商户手机号码" name="mobile" required>
							<view class="form-box-input-item">
								<input :disabled="state.disabled" type="number" :maxlength="11" v-model="state.form.mobile" placeholder="请输入手机号码" @input="setValue('mobile',state.form.mobile)"/>
							</view>
						</uni-forms-item>
						
						<uni-forms-item label="商户名称" name="region" required>
							<view class="form-box-input-item">
								<input :disabled="state.disabled" type="text" v-model="state.form.detailed_address" placeholder="请输入商户名称" @input="setValue('detailed_address',state.form.detailed_address)"/>
							</view>
							<!-- <view class="form-box-input-item" @click="state.showRegion=true">
								<view style="font-size:32rpx;">{{ state.address_txt || '请选择城市' }}</view>
								<uni-icons type="forward" size="22" color="#999999"></uni-icons>
							</view> -->
						</uni-forms-item>
						
						<uni-forms-item label="商户定位" name="detailed_address" required>
							<view class="form-box-input-item">
								<input :disabled="state.disabled" type="text" v-model="state.form.detailed_address" placeholder="请输入联系地址" @input="setValue('detailed_address',state.form.detailed_address)"/>
							</view>
						</uni-forms-item>
						
					</view>
					
					
					<view class="ss-m-t-20 bg-white" style="padding:40rpx 30rpx;border-radius: 20rpx;">
						<view class="form-box-head-title"><span style="color:#ED1010">*</span>法人实名认证</view>
						
						<uni-forms-item  name="avatar" >
							<view class="form-box-input-item-left ss-flex justify-between" >
								<s-uploader 
								 :disabled="state.disabled"
								fileMediatype="image"
								v-model:url="state.form.id_card_front" 
								:limit="1" 
								:sizeType="['original']"
								:listStyles="{border:false}"
								:imageStyles="{ width: '300rpx', height: '300rpx' }">
									<image style=" width: 300rpx" 
									:src="sheep.$url.cdn('/storage/giveaway/20250315/85e929c2b8c18b2221bb4c6798e94402.png')" 
									mode="widthFix" />
								</s-uploader>
								<s-uploader :disabled="state.disabled" v-model:url="state.form.id_card_back" :limit="1" :sizeType="['original']" :imageStyles="{ width: '300rpx', height: '300rpx' }">
									<image style=" width: 300rpx;border-radius:20rpx"
									:src="sheep.$url.cdn('/storage/giveaway/20250315/4b254833607e2d10789529f46a18e248.png')" 
									mode="widthFix" />
								</s-uploader>
							</view>
						</uni-forms-item>
					</view>
					
					<view class="ss-m-t-20 bg-white" style="padding:40rpx 30rpx;border-radius: 20rpx;">
						<view class="form-box-head-title"><span style="color:#ED1010">*</span>营业执照备案</view>
						
						<uni-forms-item  name="avatar" >
							<view class="ss-flex justify-between"  >
								<s-uploader  :disabled="state.disabled"
								style="margin-top:-40rpx"
								fileMediatype="image"
								v-model:url="state.form.id_card_front" 
								:limit="1" 
								:sizeType="['original']"
								:listStyles="{border:false}"
								:imageStyles="{ width: '800rpx',height:'400rpx'}">
									<image  style=" width: 800rpx;border-radius:20rpx" 
									:src="sheep.$url.cdn('/storage/giveaway/20250315/42128206c05f913c917c46a43371644a.png')" 
									mode="widthFix" />
								</s-uploader>
								
							</view>
						</uni-forms-item>
					</view>
					
					<template v-if="state.disabled">
						<!-- 商家账号信息 -->
						<view class="ss-m-t-20 bg-white" style="padding:33rpx 26rpx 34rpx 37rpx;border-radius: 20rpx;">
							<view class="form-box-head-title ss-m-b-24">商家账号信息</view>
							<view style="line-height:1.5em;color: #383838;">
								<view>账号：3939393939</view>
								<view>密码：3939393939</view>
								<view>系统地址：3939393939</view>
							</view>
							<view class="ss-flex justify-end">
								<button class="btn2 ss-reset-button " @tap="">
									复制
								</button>
							</view>
						</view>
						
						<!-- 支付码 -->
						<view class="ss-m-t-20 bg-white" style="padding:33rpx 26rpx 34rpx 37rpx;border-radius: 20rpx;">
							<view class="form-box-head-title ss-m-b-24">支付码</view>
							<image  style=" width: 240rpx;height:240rpx"
							:src="sheep.$url.cdn('/storage/giveaway/20250315/42128206c05f913c917c46a43371644a.png')" 
							/>
							<view class="ss-flex justify-end">
								<button class="btn2 ss-reset-button " @tap="">
									下载
								</button>
							</view>
						</view>
					</template>
					
					
					<view style="height:300rpx"></view>
				</uni-forms>
			</view>
		</view>
		
		<su-fixed bottom>
			<view class="bg-white ss-p-t-20 ss-p-b-20 ss-flex justify-center">
				<button class="btn ss-reset-button " @tap="submit()">
					提交
				</button>
			</view>
			
		</su-fixed>
		
	</s-layout>
	
	
	<!-- 地址选择弹窗 -->
	<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />

</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import Test from "@/sheep/helper/test.js";
	import {
		ref,
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import  { clone } from 'lodash'
	
	const radioList=[
		{value:0,label:'本地生活'},
		{value:1,label:'电商商城'},
		{value:2,label:'鲸喜供应链'},
	]
	const form = ref(null);
	const id_card_front = ref('');
	const id_card_back = ref('');
	// 数据
	const state = reactive({
		type:1,//0商家自己入驻   1代理帮商家入驻
		showRegion:false,
		form:{
			id_card_front:'',//身份证正面
			id_card_back:'',//身份证反面
			shopType:null,//商户类型
			name:null,
		},
		address_txt:'',
		disabled:false
	
		
	});
	

	
	const rules = {
		// 对name字段进行必填验证
		name: {
			rules: [{
					required: true,
					errorMessage: '请填写姓名',
				},
				{
					minLength: 1,
					maxLength: 6,
					errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		
		mobile: {
			rules: [{
				required: true,
				errorMessage: '请输入联系电话',
			},{
				validateFunction: (rule, value, data, callback) => {
					// 异步需要返回 Promise 对象
					return new Promise((resolve, reject) => {
						if (Test.mobile(value)) {
							resolve()
						} else {
							reject(new Error('联系电话格式错误'))
						}
					})
				}
			}]
		},
		
	}
	function radioChange(e){
		console.log(e,state.form.shopType)
	}
	
	//选择地区
	const onRegionConfirm = (e)=>{
		console.log(e)
		state.showRegion = false;
		
		if(e.province_name=='全部'){
			return false;
		};
		
		
		
		state.address_txt =e.province_name+e.city_name+e.district_name;
		// state.form.province_id = e.province_id;
		// state.form.city_id = e.city_id;
		// state.form.district_id = e.district_id;
		form.value.setValue('region',state.address_txt);
	}
	
	
	
	
	
	
	
	
	
	
	const submit = () => {
		form.value.validate().then(async formVal => {
			if (!state.avatar) {
				uni.showToast({
					title: '请检查是否有漏填项',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			
		}).catch(err => {
			console.log('err------',err);
			uni.showToast({
				title: err[0].errorMessage,
				icon: 'none',
				duration: 2000
			})
		})
	}


	
	onLoad(async(option) => {
		state.type=option.type
		state.form.shopType=option.shopType
	})

	
	function setValue(name,value){
		form.value.setValue(name,value);
	}
	
	onUnload(() => {
		
	})
</script>

<style lang="scss" scoped>
	
	view {
		box-sizing: border-box;
	}
	.btn{
		  width: 702rpx;
		  height: 80rpx;
		  background: #003288;
		  border-radius: 49rpx;
		  font-size: 32rpx;
		  color: #FFFFFF;
	  }
	  .btn2{
		 width: 124rpx;
		 height: 55rpx;
		 line-height: 55rpx;
		 background: #E8F1FF;
		 border-radius: 28rpx;
		 border: 2rpx solid #003288; 
		 font-size: 28rpx;
		 color: #01338A;
	  }
	::v-deep {
		// .radio__inner{
		// 	border-color: #ffdfc7!important;
		// }
		// .radio__inner-icon{
		// 	border-color: #ffdfc7!important;
		// 	background-color:var(--ui-BG-5)!important;
		// }
		.file-picker__box-content{
			border:none!important
		}
		
		.uni-forms-item__inner {
			padding-bottom: 20rpx
		}

		.uni-error-message {
			height: 20rpx;
			display: flex;
		}

		.uni-error-message-text {
			font-size: 20rpx;
			line-height: 1;
		}
	}

	

	


	
	.form-box {
		width: 100%;
		border-radius: 24rpx 24rpx 0 0;
		background: #F8F8F8;
		padding-bottom:60rpx;
		
		position: relative;
		

	}
	
	.form-box-input-item-left {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		view{
			
		}
	}

	.form-box-input-item {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		input {
			padding-top:12rpx;
			font-size:30rpx;
			text-align: right;
		}
	}

	::v-deep .uni-forms-item__label {
		width:max-content!important;
		.label-text{
			font-size:30rpx;
		}
	}

	::v-deep .uni-forms-item__inner {
		padding-bottom: 0;
		padding-top:20rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	
:deep().uni-radio-input{
	margin:0!important
}
	


	.form-box-head-title{
		font-weight: bold;
		font-size: 32rpx;
		color: #323232;
		text-align: left;
		font-style: normal;
	}
	
	.chongwu-zhaopian{
		width:100rpx;
		height:120rpx;
	}
	
</style>